<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表内高级搜索</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color:rgb(243,243,243);
        }
        .box{
            width: 100%;
            height: 450px;
            margin: 0 auto;
        }
        .left{
            margin-left: 150px;
            width: 200px;
            height: 350px;
            float: left;
        }
        .right{
            margin-left: 150px;
            width: 200px;
            height: 350px;
            float: left;
        }
        .bottom{
            margin-top: 20px;
            float: left;
            margin-left: 510px;
            width: 200px;
            height: 50px;
        }
        p{
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="box">
    <form class="layui-form">
        <div class="left">
            <p> 用户编号：</p>
            <div class="layui-input-inline">
                <input type="text" id="userCode" name="userCode" required lay-verify="required" placeholder="请输入用户编号" autocomplete="off" class="layui-input">
            </div>

            <p> 用户昵称：</p>
            <div class="layui-input-inline">
                <input type="text" id="nickname" name="nickname" required lay-verify="required" placeholder="请输入用户昵称" autocomplete="off" class="layui-input">
            </div>

            <p> 学习时长：</p>
            <div class="layui-input-inline">
                <input type="text" id="studyDate" name="studyDate" required lay-verify="required" placeholder="请输入学习时长" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="right">
            <p> 用户状态：</p>
            <div class="layui-input-inline">
                <select class="layui-select" name="status" id="status">
                    <option value=""></option>
                    <option value="2">正常</option>
                    <option value="3">禁言</option>
                    <option value="4">注销</option>
                    <option value="5">封停</option>
                </select>
            </div>
            <p> 用户消费总金额：</p>
            <div class="layui-input-inline">
                <input type="text" id="consumption" name="consumption" required lay-verify="required" placeholder="请输入消费总金额" autocomplete="off" class="layui-input">
            </div>
            <p> 用户注册时间：</p>
            <div class="layui-input-inline">
                <input type="text" id="createDate" name="createDate" required lay-verify="required" placeholder="请选择注册时间" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['jquery','layer','table','form','laydate'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var laydate=layui.laydate;
        var form=layui.form;

        laydate.render({
            elem: '#createDate',
            type: 'datetime',
            trigger: 'click'
        })

    })
</script>
</body>
</html>